<template>
	
	<view style="padding-bottom: 120rpx;">
		<view style="display: flex;flex-direction: column;background-color: #fff;border-radius: 20rpx;margin: 20rpx;">
			<u-swiper height="200" :list="weekendPicList" indicator :autoplay="true" circular @click="picClick"></u-swiper>
			<view style="display: flex;justify-content: space-between;align-items: center;padding: 30rpx;">
				<view style="width: 100rpx;height: 100rpx;border-radius: 50%;overflow: hidden;margin-right: 20rpx;">
					<image style="width: 100%;height: 100%;" :src="avatar"></image>
				</view>
				<view style="flex: 1;display: flex;flex-direction: column;justify-content: space-between;">
					<view style="font-size: 28rpx;">
						{{weekendTourDataDetail.nickname}}
					</view>
					<view style="font-size: 26rpx;color: #909399;">
						{{weekendTourDataDetail.createTime}}
					</view>
				</view>
			</view>
			<u-line></u-line>
			<view style="padding: 30rpx;">
				<view style="font-size: 32rpx;margin-bottom: 20rpx;font-weight: bold;">
					{{weekendTourDataDetail.title}}
				</view>
				<view style="font-size: 28rpx;">
					{{delTag(weekendTourDataDetail.content)}}
				</view>
			</view>
			<view>
				<view style="display: flex;justify-content: space-between;padding: 0 30rpx 30rpx 30rpx;">
					<view style="display: flex;justify-content: start;">
						<u-icon name="map" color="#20C3FE"></u-icon>
						<view style="margin-left: 10rpx;font-size: 22rpx;color: #909399;">{{weekendTourDataDetail.address}}</view>
					</view>
					<view style="display: flex;">
						<view
							style="margin-left: 10rpx;display: flex;justify-content: start;font-size: 22rpx;color: #909399;">
							<u-icon color="#20C3FE" name="eye"></u-icon>
							<text>{{weekendTourDataDetail.lookNum}}</text>
						</view>
						<view
							style="margin-left: 10rpx;display: flex;justify-content: start;font-size: 22rpx;color: #909399;">
							<u-icon name="more-circle" color="#ffaa00"></u-icon>
							<text>{{weekendTourDataDetail.collect}}</text>
						</view>
					</view>
				</view>
				<u-line></u-line>
				<view style="padding: 30rpx;">
					<view style="margin-bottom: 20rpx;">
						<text style="font-weight: bold;color: #20C3FE;border-bottom: 4rpx solid #20C3FE;font-size: 32rpx;">评论区</text>
					</view>
					<view style="display: flex;margin-bottom: 20rpx;" v-for="(item,index) in commentList" :key="index">
						<view style="width: 80rpx;height: 80rpx;border-radius: 50%;overflow: hidden;margin-right: 20rpx;">
							<image style="width: 100%;height: 100%;" :src="avatar"></image>
						</view>
						<view style="flex: 1;">
							<view style="height: 80rpx;display: flex;align-items: center;justify-content: space-between;">
								<view style="display: flex;flex-direction: column;width: 50%;">
									<view style="font-size: 26rpx;">
										{{item.nickname}}
									</view>
									<view style="font-size: 26rpx;color: #909399;">{{item.createTime}}</view>
								</view>
								<view style="display: flex;width: 50%;align-items: center;justify-content: flex-end;">
									<view @click="clickCommentZan(item)" style="display: flex;">
										<u-icon name="thumb-up" :color="item.updateBy?'#20C3FE':'#909399'"></u-icon>
										<text style="color: #909399;">{{item.up}}</text>
									</view>
									<view @click="clickCommentCai(item)" style="display: flex;margin-left: 20rpx;">
										<u-icon name="thumb-down" :color="item.createBy?'#20C3FE':'#909399'"></u-icon>
										<text style="color: #909399;">{{item.down}}</text>
									</view>
								</view>
							</view>
							<view>
								<text style="font-size: 26rpx;">{{item.content}}</text>
							</view>
							<view v-if="item.replies !== 0" style="display: flex;align-items: center;" @click="openReply(item)">
								<text style="font-size: 26rpx;color: #909399;">{{item.replies}}条回复</text>
								<u-icon name="arrow-right" size="15"></u-icon>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-toast ref="uToast" />
		
		<view style="padding: 10rpx 0;display: flex;width: 100%;height: 80rpx;position: fixed;bottom: 0;background-color: #fff;align-items: center;border-top: 2rpx solid #d6d7d9;">
			<view style="padding-left: 20rpx;flex: 1;">
				<u-input v-model="writeContent" type="text" placeholder="说点好听的..." confirmType="评论" @confirm="writeComment"></u-input>
			</view>
			<view style="margin-left: 20rpx;justify-content: flex-end;display: flex;align-items: center;line-height: 80rpx;padding-right: 20rpx;">
				<view>
					<u-icon class="icon" name="star" size="24" @click="clickCollect()" :color="status.societyCollect?'#20C3FE':'#909399'"></u-icon>
				</view>
			</view>
		</view>
	</view>
	
	
</template>

<script>
	import {getWeekTourDetail,getWeekTourCollectStatus,weekendTourCollectCancel,weekendTourCollect,getPCommentById,writeComment,societyCommentZan,societyCommentZanCancel,societyCommentCai,societyCommentCaiCancel} from '../../config/api.js'
	import {mapGetters} from 'vuex'
	export default{
		data(){
			return {
				id:'',
				avatar:'',
				weekendTourDataDetail:{},
				collectStatus:'',
				tempPicList:[],
				weekendPicList:[],
				commentList:[],
				writeContent:'',
				status:{}
				
			}
		},
		onLoad(options) {
			this.id = options.id;
			this.getWeekTourDetail()
			this.getCommentById()
		},
		computed: {
			...mapGetters(['getIsLogin','getUserinfo','getBaseUrl']),	
		},
		methods:{
			// 请求数据
			getWeekTourDetail(){
				getWeekTourDetail({id:this.id}).then(res =>{
					this.weekendTourDataDetail = res.data.data;
					if(res.data.data.avatar.includes('http')){
						this.avatar = res.data.data.avatar
					}else{
						this.avatar = 'http://localhost:8080' + res.data.data.avatar
					}
					
					this.tempPicList = this.weekendTourDataDetail.pic.split(",");
					this.weekendPicList = this.tempPicList.map((item,index)=>{
						return this.getBaseUrl + item
					});
					// 获取收藏状态
					// this.getStatus()
			
				})
			},
			// 获取评论
			getCommentById(){
				getPCommentById({sid:this.id,isWho:0}).then(res=>{	
					this.commentList = res.data.data
				 	if(this.getIsLogin){
						getWeekTourCollectStatus({id:this.id}).then(res =>{
							this.collectStatus = res.data.data.weekCollect
							this.status = res.data.data
							this.commentList.map((item,index)=>{
								this.status.weekCommentZan[index]?item.updateBy=true:item.updateBy=false
								this.status.weekCommentCai[index]?item.updateBy=true:item.updateBy=false
								return item
							})
						})
					} 
					
				})
			},
			// 头像处理
			picPic(avatar){
				if(avatar.includes('http')){	
					return avatar
				}else{
					return 'http://localhost:8080'+avatar
				}
				
			},
			// 获取用户的收藏状态
			getStatus(){
				getWeekTourCollectStatus({id:this.id}).then(res =>{
					this.collectStatus = res.data.data	
				})
			},
			// 移除p标签
			delTag(str){
				if(str !=null && str != ''){
					return str.replace(/<[^>]+>/g,"");
				}else{
					return str
				}
				
			},
			// 收藏
			clickCollect(){
				console.log("点击收藏");
				if(this.getIsLogin){
					if(this.collectStatus){
						// 取消收藏
						weekendTourCollectCancel({weekId:this.id}).then(res=>{
							this.collectStatus=0
							this.weekendTourDataDetail.collect--
							this.$refs.uToast.show({
								type:'warning',
								message:'取消收藏成功'
							})
						})
					}else{
						// 收藏
						weekendTourCollect({weekId:this.id,collectType:'周末游'}).then(res=>{
							this.collectStatus=1
							this.weekendTourDataDetail.collect++
							this.$refs.uToast.show({
								type:'success',
								message:'收藏成功'
							})
						})
					}
				}else{
					this.$refs.uToast.show({
						type:'warning',
						message:'请先登录'
					})
					setTimeout(function(){
						uni.navigateTo({
							url:'/pages/login/login'
						})
					},1500)
				}
				
			},
			// 点击图片 -放大
			picClick(i) {

				uni.previewImage({
					// 预览时，默认显示图片的索引
					current: i,
					// 所有图片 url 地址的数组
					urls: this.weekendPicList
				})
			},
			// 提交评论
			writeComment(){
				if(this.getIsLogin){
					var obj = {avatar:this.getUserinfo.avatar,
					nickname:this.getUserinfo.nickname,
					createTime: '刚刚',
					content:this.writeContent,
					up:0,
					down:0,
					replies:0
					}
					this.commentList.push(obj)
					writeComment({
						sid: this.id,
						pid:0,
						isWho:0,
						content: this.writeContent
					}).then(res =>{
						
						if(res.data.msg==='评论成功'){
							this.writeContent = ''
							this.$refs.uToast.show({
								type:'success',
								message:'评论成功'
							})
						}else{
							this.writeContent = ''
							this.$refs.uToast.show({
								type:'warning',
								message:'网络出了点小问题'
							})
						}
					})
				}else{
					this.$refs.uToast.show({
						type:'warning',
						message:'请先登录'
					})
					setTimeout(function(){
						uni.navigateTo({
							url:'/pages/login/login'
						})
					},1500)
					
				}
				
			},
			// 点赞评论
			clickCommentZan(item){
				if(this.getIsLogin){
					console.log("你点了评论赞++",item.id)
					// updateBy 和updateTime暂时用不上，将查询出来的状态赋值给它
					if(item.updateBy){
						console.log("点击取消点赞");
						//取消点赞
						societyCommentZanCancel({id:item.id}).then(res=>{
							if(res.data.msg=="取消点赞评论成功"){
								item.updateBy = false
								item.up--
								this.$refs.uToast.show({
									type:'warning',
									message:'取消点赞成功'
								})
							}else{
								this.$refs.uToast.show({
									type:'error',
									message:'取消点赞失败'
								})
							}
							
						})
					}else{
						//点赞
						console.log("点击点赞");
						societyCommentZan({id:item.id}).then(res=>{
							if(res.data.msg=="点赞评论成功"){
								item.updateBy = true
								item.up++
								if(item.updateTime){
									item.updateTime = false
									item.down--
								}
								this.$refs.uToast.show({
									type:'success',
									message:'点赞成功'
								})
							}else{
								this.$refs.uToast.show({
									type:'error',
									message:'点赞失败'
								})
							}
						})
					}
				}else{
					this.$refs.uToast.show({
						type:'warning',
						message:'请先登录'
					})
					setTimeout(function(){
						uni.navigateTo({
							url:'/pages/login/login'
						})
					},1500)
				}
				
				
			},
			// 点cai评论
			clickCommentCai(item){
				if(this.getIsLogin){
					console.log("你点了踩");
					if(item.updateTime){
						//取消点踩
						societyCommentCaiCancel({id:item.id}).then(res=>{
							if(res.data.msg=="取消点踩评论成功"){
								item.updateTime = false
								item.down--
								this.$refs.uToast.show({
									type:'success',
									message:'取消点踩成功'
								})
							}else{
								this.$refs.uToast.show({
									type:'warning',
									message:'取消点踩失败'
								})
							}
							
						})
					}else{
						//点踩
						societyCommentCai({id:item.id}).then(res=>{
							if(res.data.msg=="点踩评论成功"){
								item.updateTime = true
								item.down++
								if(item.updateBy){
									item.updateBy = false
									item.up--
								}
								this.$refs.uToast.show({
									type:'success',
									message:'点踩成功'
								})
							}else{
								this.$refs.uToast.show({
									type:'warning',
									message:'点踩失败'
								})
							}
						})
					}
				}else{
					this.$refs.uToast.show({
						type:'warning',
						message:'请先登录'
					})
					setTimeout(function(){
						uni.navigateTo({
							url:'/pages/login/login'
						})
					},1500)
				}
				
				
			},
			// 打开二级评论
			openReply(item){
				console.log("item:",item);
				uni.navigateTo({
					url:`../detail/commentDetail?id=${item.id}&isWho=${item.isWho}`
				})
				
			}
		}
	}
</script>

<style scoped lang="scss">

</style>